<template>
<div>
    <div class="head">
        <div class="container">
            <div class="infoCard siteNum">场地总数: {{siteNum}}</div>
            <el-select v-model="siteValue" placeholder="请选择" class="infoCard">
                <el-option
                        v-for="item in siteOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="typeValue" placeholder="请选择" class="infoCard" @change="selectChange">
                <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
            <div class="infoCard">当前场地: {{siteValue}}的{{typeValue}}</div>
            <div class="infoCard">经度: {{longitude}}</div>
            <div class="infoCard">纬度: {{latitude}}</div>
            <el-button type="primary" @click="addItem">添加</el-button>
        </div>
    </div>
        <div  class="body">
        <el-table
                refs="table"
                :data="productInfo"
                border
                style="width: 100%;">
            <el-table-column
                    prop="no"
                    label="产品编号"
                    width="400">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="产品名称"
                    width="400">
            </el-table-column>
            <el-table-column
                    prop="control"
                    label="智能控制"
                    width="400">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div v-if="openForm">
            <div class="form" >
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="产品编号">
                        <el-input v-model="form.no"></el-input>
                    </el-form-item>
                    <el-form-item label="产品名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="智能控制">
                        <el-select v-model="form.control">
                            <el-option label="是" value="是"></el-option>
                            <el-option label="否" value="否"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                        <el-button @click="closeForm">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
       </div>
    </div>
</template>

<script>
import axios from '@/plugins/axios'  //在哪里用就在哪里引入
require('@/mock/site_info.js')
    export default {
        data() {
            return {
                siteNum: 10,
                longitude:'暂无信息',
                latitude:'暂无信息',
                siteValue: '',
                typeValue: '',
                siteOptions: [{
                    value: 'A区畜类',
                    label: 'A区畜类'
                }, {
                    value: 'B区牧类',
                    label: 'B区牧类'
                }],
                typeOptions: [{
                    value: '养鸭区',
                    label: '养鸭区'
                }, {
                    value: '土鸡区',
                    label: '土鸡区'
                },{
                    value: '奶牛区',
                    label: '奶牛区'
                }, {
                    value: '土猪区',
                    label: '土猪区'
                }],
                productInfo:[{
                    no: '20200001',
                    name: '四川土鸭',
                    control: '是'
                }, {
                    no: '20200002',
                    name: '新疆白毛鸭',
                    control: '是'
                }, {
                    no: '20200003',
                    name: '四川大鸭',
                    control: '是'
                }, {
                    no: '20200004',
                    name: '新疆黄毛鸭',
                    control: '是'
                }],
                openForm: false,
                form:{
                    type:'',
                    index:'',
                    no: '',
                    name: '',
                    control: ''
                }
            }
        },
        mounted(){
            this.siteValue = this.siteOptions[0].value;
            this.typeValue = this.typeOptions[0].value;
        },
        created:function(){
        axios.get('/action/site_info')
        .then(response=>{
            console.log(this.response.data);
        })
        .catch(error=>{
           console.log(error);
        //    alert('网络错误');
        })
       
    },
        methods: {
            openFrom(){
                this.openForm = true;
            },
            closeForm(){
                this.openForm = false;
            },
            addItem(){
                this.form.type = 'add';
                this.openFrom();
            },
            handleEdit(index, row) {
                let {no,name,control} = row;
                this.form = {
                    no,
                    name,
                    control,
                    index,
                    type: 'edit'
                }
                this.openFrom();
            },
            handleDelete(index) {
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.productInfo.splice(index,1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            onSubmit(){
                let {no, name, control, type, index} = this.form;
                if (type === 'add'){
                    this.productInfo.unshift({
                        no,
                        name,
                        control
                    });
                }else if(type === 'edit'){
                    this.productInfo.splice(index,1,{
                        no,
                        name,
                        control
                    });
                }
                this.form.no = '';
                this.form.name = '';
                this.form.control = '';
                this.openForm = false;
            },
            selectChange(value){
                console.log(this.siteValue,value);
                this.productInfo = [{
                    no: '20200001',
                    name: '四川土鸭',
                    control: '是'
                }];
            }
        }
    }
</script>

<style scoped>
.head{
    position: absolute;
    top: 15%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 40px;
    line-height: 40px;
    border: 1px solid black;
}

    .container{
        display: flex;
    }
    .infoCard{
        flex: 1;
        margin: 0 15px;
        height: 38px;
        line-height: 38px;
        font-size: 16px;
        border: solid 1px #dfe4ed;
        border-radius: 5px;
        text-align: center;
    }

    .form{
        position: absolute;
        padding: 30px;
        left: 500px;
        top: 100px;
        width: 300px;
        height: 220px;
        background: #ffffff;
        border: 1px solid black;
        border-radius: 10px;
        z-index: 999;
    }
.body{
    position:absolute;
    left: 14.5%;
    width: 82%;
    top:23%;
    padding: 3px;
    margin: 0px;
    height: 73%;
    border: 1px solid black;
}
</style>